import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Spin } from 'antd';
import moment from 'moment';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;
@connect(({ empinfo, loading }) => ({
  loading: loading.models.empinfo,
  dataInfo: empinfo.dataInfo,
}))
@Form.create()
class Detail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const id = queryString.parse(location.search).empId;
    dispatch({
      type: 'empinfo/getEmpDetail',
      payload: {
        empId: id,
      },
    });
  }

  render() {
    const { loading, dataInfo } = this.props;
    return (
      <PageHeaderWrapper>
        <Spin spinning={loading}>
          <Card title="员工信息详情">
            <DescriptionList>
              <Description term="姓名 ">{dataInfo.empName || '--'}</Description>
              <Description term="证件类型">{dataInfo.cardTypeName || '--'}</Description>
              <Description term="证件号">{dataInfo.cardNo || '--'}</Description>
              <Description term="性别">{dataInfo.genderName || '--'}</Description>
              <Description term="出生日期">
                {dataInfo.birthDate ? moment(dataInfo.birthDate).format('YYYY-MM-DD') : '--'}
              </Description>
              <Description term="国籍">{dataInfo.cntryName || '--'}</Description>
            </DescriptionList>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => window.history.back()}>返回</Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}
export default Detail;
